<template>
  <div>
    <!-- currentPage当前页数 -->
    <!-- 表格区域 -->
    <el-table
      :data="list.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
      border=""
    >
      <el-table-column
        type="index"
        align="center"
        header-align="left"
        label="序号"
        width="80"
      ></el-table-column>
      <el-table-column
        prop="date"
        align="center"
        header-align="left"
        label="日期"
        width="180"
      ></el-table-column>
      <el-table-column
        prop="name"
        align="center"
        header-align="left"
        label="姓名"
        width="180"
      ></el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        align="center"
        header-align="left"
      ></el-table-column>
      <el-table-column label="操作" align="center">
        <el-button size="small" type="primary" @click="btn">编辑</el-button>
        <el-button size="small" type="danger" @click="btnCel">删除</el-button>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <div class="blck" align="center">
      <el-row type="flex" justify="center" align="midddle" style="height: 70px">
        <el-pagination
          :page-size="pagesize"
          :current-page="currentPage"
          layout="prev,pager,next"
          :total="list.length"
          align="center"
          @current-change="changePage"
        ></el-pagination>
      </el-row>
    </div>
   
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 每页数据
      pagesize: 3,
      //   默认当前页数
      currentPage: 1,
      list: [
        {
          date: "2016-05-02",
          name: "王小1虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小2虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小3虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小4虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-01",
          name: "王小5虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-01",
          name: "王小6虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-01",
          name: "王小7虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-01",
          name: "王小8虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-01",
          name: "王小9虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-01",
          name: "王小10虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
      ],
      showDialog: false,
    };
  },
  methods: {
    //   触发change事件
    changePage(newPage) {
      this.currentPage = newPage;
      console.log(newPage);
    },
    // 点击编辑事件
    btn() {},
    // 点击删除事件
   async btnCel() {
try{}catch(err){
  console.log(err);
}
    },
  },
};
</script>

<style>
</style>
